<!DOCTYPE html>
<html>
	<head>
		<title>HTML_5</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" href="../style/MainFrameCss.css" />
		<script src="../Js/MainFrameJs.js"></script>
	</head>
	<body onload="init();">
		<h1>页面内元素位置及大小的获取</h1>
		<p>我们在访问到页面中的元素后，就可以问它各种问题了，比如你的height是多少？你的width又是多少。它们都会很诚实的回答，前提是~它能明白你的语言。</p>
		<p>这一节介绍一些关于获取元素大小和位置的方法。</p>

		<p class="example">例8：有如下页面，填写test函数体，使得执行后alert出mainDiv中的textarea元素的<span>实际</span>width和height。</p>
		<p>
			<img src="../images/HTMLExample8Image1.png" />
		</p>
		<p class="title">HTMLExample8.html</p>
		<div class="codes">
			<div class="lineNum">
				<pre></pre>
			</div>
			<textarea readonly="readonly" onScroll="lineNumDivScrollTo(this);">
<!DOCTYPE html>
<html>
  <head>
    <title>获取元素位置与大小</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      .leftDiv{
        table-layout:fixed;
        background-color:#bbffbb;
        display:table;
        margin-left:5%;
        width:20%;
        height:1100px;
        float:left;
        overflow:hidden;
      }
      .leftDiv p{
        display:table-cell;
        vertical-align:middle;
        -webkit-transform:rotate(-90deg);
        white-space:nowrap;
        text-align:center;
        font-size:80px;
      }
      .leftDiv:hover{
        background-color:#99ff99;
        cursor:pointer;
      }
      .topDiv{
        width:70%;
        background-color:#ffbbbb;
        height:100px;
        float:left;
      }
      .bottomDiv{
        background-color:#aaaaaa;
        margin-left:5%;
        width:90%;
        float:left;
        height:100px;
      }
      .mainDiv{
        float:left;
        height:1000px;
        background-color:#bbbbff;
        width:70%;
      }
    </style>
    <script type="text/javascript">
      function test()
      {
        //待补完（つづく）
      }
    </script>
  </head>
  <body>
    <div class="leftDiv" onclick="test()">
      <p>点我执行js</p>
    </div>
    <div class="topDiv">I'm top</div>
    <div class="mainDiv">
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <input id="Sakuras" type="text" value="我是一只小小小小input" /><br/>
      <textarea id="Railgun"> 
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
我是一只小小小小textarea
      &lt;/textarea> 
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
      <p>我是一只小小小小P</p>
    </div>
    <div class="bottomDiv">I'm bottom</div>
  </body>
</html>
			</textarea>
		</div>
		<p class="explain">解释：本例介绍scrollHeight和scrollWidth属性。他们被用作获取元素的实际高度和宽度。所谓实际高度，就是内部内容的高度，例如本例中的textarea他看起来不高，但由于滚动条的存在，实际高度可能很高。</p>
		<p class="step">步骤：</p>
		<ol class="step">
			<li>获取textarea元素节点。</li>
			<li>你懂的。</li>
		</ol>
		<p class="title">HTMLExample8.html</p>
		<div class="codes">
			<div class="lineNum">
				<pre></pre>
			</div>
			<textarea readonly="readonly" onScroll="lineNumDivScrollTo(this);">
function test()
{
  //待补完（つづく）
  var o = document.getElementById("Railgun");
  alert("width = " + o.scrollWidth);
  alert("height = " + o.scrollHeight);
}
			</textarea>
		</div>
		<p>我们可以看到，实际alert出来的scrollHeight是很大的，原因就是这是实际高度，会把滚动条计算进去。</p>
		<p>相应的，我们有offsetWidth和offsetHeight用于获取可视化宽度和高度。</p>

		<p class="example">例9：在例8的页面中，填写test函数体，使得执行后alert出mainDiv中的input元素的<span>相对浏览器可视区域的</span>Top。</p>
		<p class="explain">解释：本例介绍offsetTop属性，他被用作获取元素的相对父容器的上边距。同时还介绍scrollTop属性，他被用作获取竖直滚动条偏移量。</p>
		<p class="step">步骤：</p>
		<ol class="step">
			<li>获取textarea元素节点。</li>
			<li>循环获取offsetTop的和，即把对父容器的上边距叠加。</li>
			<li>用得到的值减去竖直滚动条的偏移量，就是相对浏览器可视区域的上边距了。</li>
		</ol>
		<p class="title">HTMLExample9.html</p>
		<div class="codes">
			<div class="lineNum">
				<pre></pre>
			</div>
			<textarea readonly="readonly" onScroll="lineNumDivScrollTo(this);">
function test()
{
  //待补完（つづく）
  var o = document.getElementById("Sakuras");
  var iOffsetTop = 0;
  while (o.offsetParent != null)
  {
    iOffsetTop = iOffsetTop + o.offsetTop;
    o = o.offsetParent; 
  } 
  alert(iOffsetTop - document.body.scrollTop);
}
			</textarea>
		</div>
		<p>第6行，通过循环来累加offsetTop的值。<br/>
		第11行，通过body.scrollTop获取到滚动条当前偏移量。</p>
		<p>这里出来一个概念<span>父容器</span>，它是对最近的动态定位的包含元素的引用，可以理解为能决定本元素定位的最近的父元素。</p>
		<p>关于offsetParent的概念有点麻烦，欲知详情可以狠狠的点击这里：<a target="_blank" href="http://www.cnblogs.com/xiaohui108/archive/2011/05/27/2059991.html">定位我的父亲究竟是谁？</a>
		<p>当往下拉动滚动条，使input元素不在可视区域内时，alert出来的值会变成负数。</p>
		<p>相应的，我们有offsetLeft和scrollLeft俩个属性，对应左边距和横向滚动条的偏移量。</p>

		<p class="summary">好啦，这一节就到这里，我们来总结一下：</p>
		<ul class="summary">
			<li>scrollHeight，scrollWidth获取实际高度和宽度。</li>
			<li>offsetHeight，offsetWidth获取可视高度和宽度。</li>
			<li>offsetTop，offsetLeft获取相对父容器的左边距和上边距。</li>
			<li class="easterEgg0" onmouseover="easterEgg0MouseOver(this);" onmouseout="easterEgg0MouseOut(this);">没了。</li>
			<li>我是来吐槽楼上的。</li>
		</ul>
		<div class="bpn">
			<div class="pre" onclick="subFrameNav('HTML', 4)"></div>
			<div class="next" style="display:none" onclick="subFrameNav('HTML', 6)"></div>
		</div>
	</body>
</html>
